<template>
	<view class="goodscont">
		<mysearch></mysearch>
		<view class="goodsitem" @tap="gotodetail(item.goods_id)" v-for="item in goodslist" :key="item.goods_id">
			<view class="goodsimgbox">
				<image class="goodsimg" :src="item.goods_big_logo || defaultImg"></image>
			</view>

			<view class="goodsrig">
				<view class="goodname">
					{{item.goods_name}}
				</view>
				<text class="goodprice">￥{{item.goods_price}}</text>
			</view>
		</view>
		
		<view v-show="isShow">
			我也是有底线的~~~
		</view>
	</view>
</template>

<script>
	import {
		getGoodslist
	} from '../../utils/http.js'
	export default {
		data() {
			return {
				goodslist: [], //商品列表
				defaultImg: "https://t7.baidu.com/it/u=4162611394,4275913936&fm=193&f=GIF",
				params:{
					pagenum: 1, // 页码数
					pagesize: 10, // 每页的条数
					cid: null, // 分类id
				},
				total: 0, 
				isShow: false, 
			}
		},
		methods: {
			getList(){
				getGoodslist(this.params).then(res => {
					console.log(res);
					// concat 数组拼接 this.goodslist.concat(res.data.message.goods)
					this.goodslist = [...this.goodslist, ...res.data.message.goods];
					this.total = res.data.message.total;
				})
			},
			gotodetail(goods_id){ // 跳详情
				uni.navigateTo({
					url:"/pages-other/detail/detail?goods_id=" + goods_id
				})
			}
		},
		// 接收路由传递过来的参数
		onLoad(options) {
			console.log(options); // {cid: 5} 这个就是分类id
			this.params.cid = options.cid
			console.log(this.params); // {pagenum:1, pagesize: 10, cid: 6}
			// 发送请求
			this.getList()
			
			console.log(uni.getSystemInfoSync().windowHeight);

		},
		onReachBottom() { // 上拉的时候触发
			console.log("上拉的时候触发");
			// 判断 什么时候数据加载完毕
			if(this.goodslist.length >= this.total){
				console.log("我也是有底线的");
				this.isShow = true;
				return false;
			}
			// 上拉加载其实就是分页
			this.params.pagenum++;
			this.getList();
		},
		onPullDownRefresh() {  // 逻辑代码  下拉的时候触发
			console.log("下拉的时候触发");
			this.params.pagenum = 1;
			this.goodslist = [];
			this.isShow = false;
			this.getList();
		}
		
	}
</script>

<style lang="scss">
	.goodscont {
		background-color: #fff;

		.goodsitem {
			display: flex;
			box-sizing: border-box;
			padding: 20rpx;

			.goodsimgbox {
				// width: 400rpx;
				flex: 1;
				align-items: center;

				.goodsimg {
					width: 100%;
					height: 240rpx;
				}
			}

			.goodsrig {
				width: 60%;
				margin-left: 30rpx;

				.goodname {
					// white-space: wrap;  单词换行
					font-size: 28rpx;
					margin: 60rpx 0;
					
					// 2行显示省略号
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
					
					
					
				}

				.goodprice {
					color: #c00;
					
				}
			}

		}
	}
</style>
